<template>
  <div class="hello">
    <ul>
      <li>{{ name }}</li>
      <li>{{ age }}</li>
    </ul>
    <button @click="sayHello">hello</button>
    <!-- <Child msg="hello" @hello="childSayHello">
      <span>hell world</span>

      <template #test>
        <div>
          test slot
        </div>
      </template>
    </Child> -->
    <Child />

    <br />
    <!-- <button @click="showLife = !showLife">toggleShow</button>
    <LifeCycle v-if="showLife" /> -->
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import Child from './child'
import LifeCycle from './life_cycle'
export default {
  components: {
    Child,
    LifeCycle
  },
  setup (props) {
    let name = ref('Tom')
    let age = ref(20)
    let obj = reactive({
      type: 'animal',
      name: 'dog'
    })

    let showLife = ref(true)

    function sayHello () {
      // alert(`I'm ${name}, and ${age} year's old.`)
      // console.log(name.value, age.value);
      console.log(obj)
      obj.name = 'cat'
      console.log(obj)
    }

    function childSayHello () {
      alert('hello')
    }

    let person = {
      name: 'Jack',
      age: 20
    }

    const p = new Proxy(person, {
      get (target, propName) {
        console.log(`get ${propName}`)
        // return target[propName];
        return Reflect.get(target, propName)
      },
      set (target, propName, value) {
        console.log(`update ${propName} to ${value}`)
        // target[propName] = value;
        return Reflect.set(target, propName, value)
      },
      deleteProperty (target, propName) {
        // return delete target[propName];
        console.log(`delete ${propName}`)
        return Reflect.deleteProperty(target, propName)
      }
    })

    return {
      name,
      age,
      showLife,
      sayHello,
      childSayHello
    }
  }
}
</script>
